<template>
  <div class="sn-container">
    <el-card>
      <div class="table-header">
        <!-- <span class="title">SN清单</span> -->
        <!-- <div class="actions">
          <el-button
            type="primary"
            size="small"
            @click="refreshData"
          >刷新</el-button>
          <el-button
            type="success"
            size="small"
            @click="exportExcel"
          >导出Excel</el-button>
        </div> -->
      </div>

      <el-table
        :data="snData"
        border
        stripe
        max-height="50vh"
        v-loading="loading"
        element-loading-text="数据加载中..."
      >
        <el-table-column
          prop="PROSN"
          label="产品序列号"
          width="180"
          align="center"
        />
        <el-table-column
          prop="USEDSTATE"
          label="使用状态"
          align="center"
        >
          <template #default="{ row }">
            <el-tag :type="row.USEDSTATE === '未使用' ? 'warning' : 'success'">
              {{ row.USEDSTATE }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'ProductionSnInfo',
  props: {
    workOrderId: {
      type: String,
      required: true
    },
    // 从父组件接收的SN数据
    snData: {
      type: Array,
      required: true,
      default: () => [],
      validator: (value) => {
        return value.every(item =>
          'PROSN' in item &&
          'USEDSTATE' in item
        );
      }
    }
  },
  data () {
    return {
      loading: false
    };
  },
  methods: {
    refreshData () {
      this.$emit('refresh-sn', this.workOrderId);
    },
    exportExcel () {
      this.$emit('export-excel', this.snData);
    }
  }
}
</script>

<style scoped>
</style>